/**
 * 内部账号体系登录
 */
import { Form, Input, Button } from 'antd'
import { useStreams } from '@/lib/utils'
import services from '@/services'
import { LoginStatus } from '@/services/auth'
import { notLoggedIn } from '@/services/auth/info'
import config from '@/config'
import './index.module.less'

interface LoginFields {
  name: string
  password: string
}

interface RegisterFields extends LoginFields {
  confirmPassword: string
}

export default function Login() {
  const [mode, setMode] = useState<'login' | 'register'>('login')
  if (mode === 'login') return <LoginForm switchMode={() => setMode('register')} />
  return <RegisterForm switchMode={() => setMode('login')} />
}

function LoginForm(props: { switchMode: () => void }) {
  const { switchMode } = props

  const [info] = useStreams(services.auth.info$)
  const notice = info.status === LoginStatus.LoginFailed ? info.message : ''

  const login = useCallback((values: LoginFields) => {
    void services.auth.internal.login(values.name, values.password)
  }, [])

  return <div styleName="main">
      <h1>{config.PRODUCT_NAME}</h1>
    {notice ? <div styleName="notice">{notice}</div> : null}
    <Form<LoginFields>
      labelCol={{ span: 0 }}
      initialValues={{ name: '', password: '' }}
      onFinish={login}
      onValuesChange={() => notLoggedIn()}
    >
      <Form.Item label="用户名" name="name" rules={[{ required: true }]}>
        <Input placeholder="输入用户名" />
      </Form.Item>
      <Form.Item label="密码" name="password" rules={[{ required: true }]}>
        <Input type="password" placeholder="输入密码" />
      </Form.Item>
      <div styleName="actions">
        <Button type="primary" htmlType="submit">
          登录
        </Button>
        {/* <a onClick={switchMode}>注册用户</a> */}
      </div>
      <div styleName="tips">建议使用谷歌浏览器</div>
    </Form>
  </div>
}

function RegisterForm(props: { switchMode: () => void }) {
  const { switchMode } = props

  const [notice, setNotice] = useState('')
  const [info] = useStreams(services.auth.info$)
  useEffect(() => {
    if (info.status === LoginStatus.LoginFailed) setNotice(info.message)
  }, [info])

  const register = useCallback((values: RegisterFields) => {
    if (values.password !== values.confirmPassword) {
      setNotice('两次输入的密码不一致')
      return
    }
    void services.auth.internal.register(values.name, values.password)
  }, [])

  return <div styleName="main">
    <h1>用户注册</h1>
    {notice ? <div styleName="notice">{notice}</div> : null}
    <Form<RegisterFields>
      labelCol={{ span: 0 }}
      initialValues={{ name: '', password: '', confirmPassword: '' }}
      onFinish={register}
      onValuesChange={() => {
        setNotice('')
        notLoggedIn()
      }}
    >
      <Form.Item label="用户名" name="name" rules={[{ required: true }]}>
        <Input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item label="密码" name="password" rules={[{ required: true }]}>
        <Input type="password" placeholder="请输入密码" />
      </Form.Item>
      <Form.Item label="确认密码" name="confirmPassword" rules={[{ required: true }]}>
        <Input type="password" placeholder="请确认密码" />
      </Form.Item>
      <div styleName="actions">
        <Button type="primary" htmlType="submit">
          注册
        </Button>
        <a onClick={switchMode}>用户登录</a>
      </div>
    </Form>
  </div>
}
